<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">

  <div class="suggestions">

    <div class="page-action-bar page-action-bar--narrow">

      <div class="gf-form gf-form--grow">
        <span class="gf-form-label width-7">CPU 核数</span>
        <input class="gf-form-input" type="number" step="1" min="0" max="1024" required ng-model="ctrl.cpuCores">
        <info-popover mode="right-absolute">
          请输入整数，范围从 0 到 1024。
        </info-popover>
      </div>

      <div class="page-action-bar__spacer"></div>

      <div class="gf-form gf-form--grow">
        <span class="gf-form-label width-9">内存大小（GB）</span>
        <input class="gf-form-input" type="number" step="1" min="0" max="5120" required ng-model="ctrl.memorySize">
        <info-popover mode="right-absolute">
          请输入整数，范围从 0 到 5120。
        </info-popover>
      </div>

      <div class="page-action-bar__spacer"></div>

      <a class="btn btn-success" style="white-space: nowrap;" ng-click="ctrl.updateSuggestions()">
        优化建议
      </a>
    </div>

    <div class="alert alert-error" style="margin:20px 0 25px 0" ng-if="ctrl.errorMessages">
      {{ctrl.errorMessages}}
    </div>

    <div class="grafana-info-box span8" style="margin:20px 0 25px 0" ng-if="ctrl.errorMessages || !ctrl.suggestions">
      “CPU 核数”从 0 到 1024；“内存大小（GB）” 从 0 到 5120；点击“优化建议”按钮可以看到建议值。
    </div>

    <div class="gf-form-group search-results" ng-if="!ctrl.errorMessages && ctrl.suggestions">

      <h3 class="page-heading">建议值</h3>

      <table class="filter-table">
        <tr ng-repeat-start="(l1Name, l1Value) in ctrl.suggestions">
          <td class="admin-settings-section">{{l1Name}}</td>
          <td></td>
        </tr>
        <tr ng-repeat-start="(l2Name, l2Value) in l1Value">
          <td class="admin-settings-section" style="padding-left: 25px;">{{l2Name}}</td>
          <td></td>
        </tr>
        <tr ng-repeat-end ng-repeat="(l3Name, l3Value) in l2Value">
          <td style="padding-left: 50px;">{{l3Name}}</td>
          <td>{{l3Value}}</td>
        </tr>
        <tr ng-repeat-end style="display: none;">
          <td></td>
          <td></td>
        </tr>
      </table>

    </div>
  </div>

</div>
